<template>
  <div style="background-color: #f5f5f5;">
     <NavBar title="商品清单"></NavBar>
     <div class="item">
       <van-cell-group>
         <van-cell title="商品">
            <div slot="default">共{{this.orderList.length}}件</div>
         </van-cell>
       </van-cell-group>
     </div>
     <van-card v-for="(item,index) in orderList">
        <div slot="num">
          x{{item.num}}
        </div>
        <div slot="price">
          {{item.goods_price}}
        </div>
        <div slot="title">
          {{item.goods_name}}
        </div>
        <div slot="thumb" class="orderlist">
          <img :src="item.small_image" >
        </div>
     </van-card>
  </div>
</template>

<script>
  import NavBar from '@/components/navBar'
  import { mapGetters } from 'vuex'
  import { getCartList } from '@/api/cart'
  export default{
    name:'OrderDetails',
    computed:{
      ...mapGetters(['getUserInfo']),
    },
    components:{
      NavBar
    },
    data() {
      return {
        orderList:[]
      }
    },
    created() {
      this.getCartList()
    },
    methods:{
      async getCartList (){
        const {data} = await getCartList(this.getUserInfo.token)
        this.orderList = data.data
      },
    }
  }
</script>

<style scoped="scoped">
  .orderlist img{
    width: 100%;
    height: 100%;
  }
  .item{
    margin-top: 10px;
  }

  .van-card:not(:first-child) {
      margin-top: 0;
  }
</style>
